<template>
  <q-toolbar class="map-top-bar bg-white-6 row full-width q-gutter-x-sm">
    <template v-if="modelValue === 'preview'">
      <div v-if="!isEmpty(openedMap)" class="row items-center text-body1 text-bold">
        <q-icon class="map-icon-color" name="mdi-map-marker-multiple-outline on-left" size="24px"></q-icon>
        <span>{{ openedMap?.mapName }}</span>
      </div>
      <q-space></q-space>
      <div class="row q-gutter-x-sm">
        <template v-if="true">
          <q-btn :disable="isEmpty(openedMap)" :label="$t('MapCore.RealTimeMonitoring')" :loading="loading"
                 icon="mdi-monitor-eye" v-bind="btnAttrs" @click="getMqttTopic"></q-btn>
        </template>
      </div>
    </template>
    <template v-else-if="['edit', 'monitor'].includes(modelValue)">
      <div class="row items-center text-body1 text-bold">
        <q-icon class="map-icon-color" name="mdi-map-marker-radius-outline on-left" size="24px"></q-icon>
        <span>{{ openedMap.mapName }}</span>
      </div>
      <div v-for="el in AGVStatus" :key="el.value" class="q-pl-sm text-bold">
        <q-badge :color="el.color" class="q-badge-dot" rounded />
        {{ el.label }}: {{ getAMRNum(el.value) }}
      </div>
      <q-space></q-space>
      <div class="row q-gutter-x-sm">
        <template v-if="modelValue === 'monitor'">
          <q-btn :label="$t('MapCore.ExitMonitoring')" v-bind="btnAttrs" @click="exitMapEdit"></q-btn>
        </template>
      </div>
    </template>
  </q-toolbar>
</template>

<script setup>
import { i18n } from 'boot/i18n'
import { getAPI } from 'src/api'
import { AGVStatus } from 'src/enum/index.js'
import { createWarnTips, isEmpty } from 'src/utils/utils'
import { computed, inject, nextTick, onBeforeUnmount, ref } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({ monitorInfo: Object, openedMap: Object, modelValue: String })
const emits = defineEmits(['update:modelValue', 'update:monitorInfo'])
const handleLoad = inject('handleLoad')
const setMenuDrawer = inject('setMenuDrawer')

const router = useRouter()
const loading = ref(false)
const btnAttrs = { color: 'primary', glossy: true }
const getAMRNum = computed(
  () => el => (props.monitorInfo.status || []).find(item => item.statusCode === el)?.agvSumSize || 0)

const getMqttTopic = () => {
  loading.value = true
  const { mapGroundCode = '' } = props.openedMap || {}
  getAPI(`/tpm/yfagv/api/agvMonitor/getMonitorConverCfgCnt/${mapGroundCode}`, {}, data => {
    loading.value = false
    if (!data) {
      const title = i18n.t('MapCore.MonitorTips'), okLabel = i18n.t('Misc.GotoConfig')
      return createWarnTips({ title, okLabel }, () => {
        handleLoad && handleLoad(true)
        nextTick(async () => {
          await router.replace('/MonitorCtrl/DeviceStatusRealTimeDisplay/DataConvCfg')
          handleLoad && handleLoad(false)
        })
      })
    }
    handleMode('monitor')
  }, () => {
    loading.value = false
  })
}

const exitMapEdit = () => {
  setMenuDrawer && setMenuDrawer(true)
  setTimeout(() => emits('update:modelValue', 'preview'), 55)
}
const handleMode = mode => {
  setMenuDrawer && setMenuDrawer(false)
  setTimeout(() => emits('update:modelValue', mode), 55)
}
onBeforeUnmount(() => setMenuDrawer && setMenuDrawer(true))
</script>

<style lang="scss" scoped>
.map-icon-color {
  color: rgb(32, 76, 202);
}
</style>